
<script lang="ts" setup>
import { ref } from 'vue';
const currentData = ref<any>({
  time: "00:00:00",
  arr: [1,2,3,4,5,6,7,8,9,10,11]
});

const ulRef = ref();

const hasScrollbar = () => {
  return ulRef.value.scrollWidth > (window.innerWidth || document.documentElement.clientWidth);
};

</script>
<template>
  <section class="homeSeckillUtil">
    <div class="seckill-wrap">
      <strong class="title">京东秒杀</strong>
      <span class="time">倒计时 {{currentData.time}}</span>
      <div class="more">更多秒杀 <span class="more-icon"></span></div>
    </div>
    <ul class="content-wrap" ref="ulRef">
      <li v-for="(item, index) in currentData.arr" :key="index">
        <div class="item">
          <div class="img-icon" :style="{background: `url(https://m.360buyimg.com/mobilecms/s150x150_jfs/t26341/46/496420390/273297/7bb8b37b/5baf3a8dN6c573de6.jpg!q70.jpg.dpg) no-repeat center`}"></div>
          <div class="new-price"><span>￥</span>1200</div>
          <strike class="old-proce">￥2300</strike>
        </div>
      </li>
      <li>
        <div class="item more-btn">查看全部</div>
      </li>
    </ul>
  </section>
</template>

<style lang="less" scoped>
.homeSeckillUtil {
  width: 3.75rem;
  background: white;
  overflow: hidden;
  .seckill-wrap {
    height: .34rem;
    padding:  0 .05rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .title {
      font-size: .2rem;
      color: #f02b2b;
      font-weight: 700;
    }
    .time {
      font-size: .16rem;
      flex: 1;
      padding-left: .05rem;
      box-sizing: border-box;
    }
    .more {
      height: .16rem;
      line-height: .16rem;
      font-size: .14rem;
      color: #f23030;
      display: flex;
      align-items: center;
      .more-icon {
        width: .12rem;
        height: .12rem;
        background: url("../../../assets/images/more-icon-2.png") center no-repeat;
        background-size: contain;
        margin-left: .04rem;
      }
    }
  }
  .content-wrap {
    display: flex;
    overflow-x: scroll;
    padding-left: .05rem;
    box-sizing: border-box;
    margin-bottom: .1rem;
    &::-webkit-scrollbar {display:none}
    .item {
      width: .8rem;
      height: 1.25rem;
      &.more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: .2rem;
        height: .7rem;
        background: #f5f5f5;
        color: #666;
        font-size: .12rem;
        padding: 0 .05rem;
      }
      .img-icon {
        width: .7rem;
        height: .7rem;
        background-size: cover !important;
        margin: 0 auto .1rem;
      }
      .new-price {
        color: #f23030;
        font-size: .16rem;
        line-height: .16rem;
        height: .16rem;
        text-align: center;
        font-weight: 700;
        margin-bottom: .04rem;
        span {
          font-size: .12rem;
        }
      }
      .old-proce {
        display: block;
        width:100%;
        font-size: .12rem;
        text-align: center;
      }
    }
  }
  
}
</style>

